<template>
    <div>
       <h1>计数器</h1>
       <h2>{{count}}</h2>
       <button @click="increment">+</button>
    </div>
</template>
<!-- 
    一、ref实现响应式的步骤
    使用ref函数来定义响应式数据的步骤
    1、导入ref函数:import {ref} from 'vue'
    2、调用函数来定义相适应数据: let 变量=ref<数据类型>(初始值)
    3、操作ref变量.value来获取数据: count.value++
    4、在模板中直接使用ref变量:{{ref变量}}
    二、ref的底层依然采用Object.defineProperty方法来实现对数据劫持
 -->
<script lang='ts' setup>
   import {ref} from 'vue'
   let count=ref<number>(0)
   const increment=()=>{
     count.value++
     console.log('count',count.value);
   }
</script>

<style lang='scss' scoped>
</style>